<!-- 来料检验单详情页面 -->
<template>
  <div class="app-container">
    <!-- 返回按钮 -->
    <el-page-header @back="goBack" :content="title" />

    <!-- 基本信息卡片 -->
    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-descriptions :column="3" border size="medium" v-loading="loading">
        <el-descriptions-item label="检验单编号">{{ iqcInfo.iqcCode }}</el-descriptions-item>
        <el-descriptions-item label="检验单名称">{{ iqcInfo.iqcName }}</el-descriptions-item>
        <el-descriptions-item label="来源单据编号">{{ iqcInfo.sourceDocCode }}</el-descriptions-item>
        <el-descriptions-item label="来源单据类型">
          <el-tag type="primary" v-if="iqcInfo.sourceDocType === 1 || iqcInfo.sourceDocType === '1'">采购入库单</el-tag>
          <span v-else>{{ iqcInfo.sourceDocType }}</span>
        </el-descriptions-item>

        <el-descriptions-item label="供应商名称">{{ iqcInfo.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="货物编码">{{ iqcInfo.goodsCode }}</el-descriptions-item>
        <el-descriptions-item label="货物名称">{{ iqcInfo.goodsName }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ iqcInfo.stockSfn }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ iqcInfo.unitName }}</el-descriptions-item>
        <el-descriptions-item label="接收数量">{{ iqcInfo.quantityRecivedNum }}</el-descriptions-item>
        <el-descriptions-item label="检测数量">{{ iqcInfo.quantityCheckNum }}</el-descriptions-item>
        <el-descriptions-item label="不合格数">{{ iqcInfo.quantityUnqualifiedNum }}</el-descriptions-item>
        <el-descriptions-item label="合格数量">{{ iqcInfo.quantityQualifiedNum }}</el-descriptions-item>
        <el-descriptions-item label="检测结果">
          <el-tag type="success" v-if="iqcInfo.checkResult === '1'">合格</el-tag>
          <el-tag type="danger" v-else-if="iqcInfo.checkResult === '2'">不合格</el-tag>
          <el-tag type="warning" v-else-if="iqcInfo.checkResult === '3'">待检</el-tag>
          <span v-else>{{ iqcInfo.checkResult }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="来料日期">{{ parseTime(iqcInfo.reciveDate) }}</el-descriptions-item>
        <el-descriptions-item label="检测日期">{{ parseTime(iqcInfo.inspectDate) }}</el-descriptions-item>
        <el-descriptions-item label="单据状态">
          <el-tag v-if="iqcInfo.status === '1'">草稿</el-tag>
          <el-tag type="info" v-else-if="iqcInfo.status === '2'">已提交</el-tag>
          <el-tag type="success" v-else-if="iqcInfo.status === '3'">已审核</el-tag>
          <span v-else>{{ iqcInfo.status }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ iqcInfo.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(iqcInfo.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ iqcInfo.remark }}</el-descriptions-item>
            </el-descriptions>
    </el-card>

    <!-- 检验明细卡片 -->
    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>检验明细</span>
      </div>
      <el-table
        v-loading="lineLoading"
        :data="lineList"
        style="width: 100%"
        border>
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="检测项编码" align="center" prop="indexCode" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="检测项名称" align="center" prop="indexName" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="检测项类型" align="center" prop="indexType" min-width="120">
                  <template slot-scope="scope">
            <el-tag v-if="scope.row.indexType === '1'" type="info">外观</el-tag>
            <el-tag v-else-if="scope.row.indexType === '2'" type="success">视觉</el-tag>
            <el-tag v-else-if="scope.row.indexType === '3'" type="warning">尺寸</el-tag>
            <el-tag v-else-if="scope.row.indexType === '4'" type="primary">物理性能检测</el-tag>
            <el-tag v-else-if="scope.row.indexType === '5'" type="danger">化学成分检测</el-tag>
            <span v-else>{{ scope.row.indexType }}</span>
                  </template>
                </el-table-column>
        <el-table-column label="标准值" align="center" prop="standerVal" min-width="100" />
        <el-table-column label="检测要求" align="center" prop="checkMethod" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="检测工具" align="center" prop="qcTool" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="误差上限" align="center" prop="thresholdMax" min-width="80" />
        <el-table-column label="误差下限" align="center" prop="thresholdMin" min-width="80" />
        <el-table-column label="单位" align="center" prop="unitName" min-width="80" />
        <el-table-column label="备注" prop="remark" align="center" />
              </el-table>
    </el-card>
  </div>
</template>

<script>
import { getIqc, selectQcIqcLineByIqcId } from "@/api/qc/IncomingInspection";

export default {
  name: "IqcDetail",
  data() {
    return {
      // 标题
      title: "来料检验单详情",
      // 来料检验单ID
      iqcId: null,
      // 来料检验单信息
      iqcInfo: {},
      // 检验明细列表
      lineList: [],
      // 加载状态
      loading: false,
      // 明细加载状态
      lineLoading: false,
      // 请求锁，防止重复提交
      isRequesting: false
    };
  },
  created() {
    // 从路由参数获取来料检验单ID
    const iqcId = this.$route.params.id;
    console.log("路由参数中的ID:", iqcId);
    console.log("路由参数类型:", typeof iqcId);
    if (iqcId) {
      // 确保iqcId是数字类型
      this.iqcId = parseInt(iqcId);
      console.log("设置iqcId:", this.iqcId);
      console.log("设置iqcId类型:", typeof this.iqcId);
      this.getIqcInfo();
      // 只在created中获取明细数据，不再在多处调用
      this.getLineList();
    } else {
      this.$message.error("未找到来料检验单ID，无法加载详情");
      this.goBack();
    }
  },
  mounted() {
    // 不再在mounted中重复调用API
    console.log("组件已挂载，检查数据状态");
  },
  watch: {
    // 监听路由参数变化
    '$route.params.id': {
      handler(newVal) {
        console.log("路由参数ID变化:", newVal);
        // 只有在ID确实改变且不为空的情况下才重新获取数据
        if (newVal && newVal !== this.iqcId) {
          this.iqcId = newVal;
          // 重置数据
          this.lineList = [];
          // 重新获取数据
          this.getIqcInfo();
          this.getLineList();
        }
      },
      immediate: false // 不需要立即执行，因为created中已经处理了初始化
    }
  },
  methods: {
    /** 返回列表页 */
    goBack() {
      this.$router.push("/qc/IncomingInspection");
    },
    /** 获取来料检验单信息 */
    getIqcInfo() {
      this.loading = true;
      getIqc(this.iqcId)
        .then(response => {
          this.iqcInfo = response.data || {};
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 获取检验明细列表 */
    getLineList() {
      if (!this.iqcId) {
        console.error("无法获取检验明细，iqcId为空");
        return;
      }

      // 防止重复请求
      if (this.isRequesting) {
        console.log("请求正在进行中，跳过重复请求");
        return;
      }

      console.log("开始获取检验明细列表, iqcId:", this.iqcId);
      console.log("传递的参数对象:", { iqcId: this.iqcId });
      this.lineLoading = true;
      this.isRequesting = true; // 设置请求锁

      // 将GET请求修改为POST请求，并使用对象传参
      // 确保参数名称与后端实体类字段名完全一致
      const params = { iqcId: this.iqcId };
      console.log("最终传递的参数:", params);
      console.log("参数JSON字符串:", JSON.stringify(params));
      selectQcIqcLineByIqcId(params)
        .then(response => {
          console.log("检验明细列表响应:", response);
          if (response && response.code === 200) {
            if (response.rows && Array.isArray(response.rows)) {
              this.lineList = response.rows;
              console.log("成功设置检验明细数据(rows):", this.lineList.length, "条记录");
            } else if (response.data && Array.isArray(response.data)) {
              this.lineList = response.data;
              console.log("成功设置检验明细数据(data):", this.lineList.length, "条记录");
            } else {
              console.warn("响应中没有有效的数组数据");
              this.lineList = [];
            }
          } else {
            console.warn("响应状态码异常:", response.code);
            this.lineList = [];
            this.$message.warning(`获取检验明细数据异常: ${response.msg || '未知错误'}`);
          }
        })
        .catch(error => {
          console.error("获取检验明细列表失败:", error);
          this.lineList = [];
          // 如果是重复提交错误，不显示错误消息给用户
          if (error && error.message && error.message.includes("数据正在处理，请勿重复提交")) {
            console.warn("检测到重复提交，忽略此错误");
          } else {
            this.$message.error("获取检验明细列表失败: " + (error.message || '未知错误'));
          }
        })
        .finally(() => {
          this.lineLoading = false;
          // 延迟释放请求锁，避免快速连续调用
          setTimeout(() => {
            this.isRequesting = false;
          }, 200);
        });
    }
  }
};
</script>

<style scoped>
.el-tag {
  padding: 2px 8px;
}
.el-descriptions {
  margin: 10px 0;
}
</style>
